<template>
  <div class="admin-category">
    <!-- 新增分类 -->
    <el-divider content-position="left">新增分类</el-divider>
    <el-form :inline="true" :model="formAdd" size="small" class="form-add">
      <el-form-item label="分类名">
        <el-input v-model="formAdd.title" placeholder="分类名"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          type="input"
          v-model="formAdd.desc"
          placeholder="描述"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" type="primary" @click="onSubmitAdd">
          新增
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 全部分类 -->
    <el-divider content-position="left">全部分类</el-divider>
    <el-table :data="categories" border stripe style="width: 100%">
      <el-table-column type="index" width="50" label="#"></el-table-column>
      <el-table-column prop="title" label="分类名"></el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <!-- 删除分类确认框 -->
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除该分类吗？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              class="btn-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑分类 -->
    <el-dialog title="编辑分类" :visible.sync="showEdit">
      <el-form :model="formEdit">
        <el-form-item label="分类名">
          <el-input v-model="formEdit.title" placeholder="分类名"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formEdit.desc" placeholder="描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-edit"
          type="primary"
          plain
          @click="onSubmitEdit"
          >提交</el-button
        >
        <el-button icon="el-icon-close" plain @click="showEdit = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "admin-category",
  data() {
    return {
      showEdit: false,
      categories: [],
      formAdd: {
        title: "",
        desc: ""
      },
      formEdit: {
        categoryId: "",
        title: "",
        desc: ""
      }
    };
  },
  methods: {
    /**
     * 获取所有分类
     */
    async getAllCategory() {
      const { data: res } = await this.$api.category.getAllCategory();
      console.log(res);
      this.categories = res.data;
    },
    /**
     * 提交新增
     */
    async onSubmitAdd() {
      const { data: res } = await this.$api.category.add(this.formAdd);
      if (res.code !== 200) {
        this.$message.error(res.msg);
      } else {
        this.formAdd = {
          title: "",
          desc: ""
        };
        this.$message.success(res.msg);
        this.getAllCategory();
      }
      console.log(res);
    },
    /**
     * 提交删除
     */
    async handleDelete(row) {
      const categoryId = row.categoryId;
      const { data: res } = await this.$api.category.delete(categoryId);
      this.$message.success(res.msg);
      console.log(res);
      this.getAllCategory();
    },
    /**
     * 显示编辑区域，设置数据
     */
    handleEdit(row) {
      this.showEdit = true;
      Object.assign(this.formEdit, row);
    },
    /**
     * 提交编辑
     */
    async onSubmitEdit() {
      const { data: res } = await this.$api.category.update(this.formEdit);
      if (res.code !== 200) {
        this.$message.error(res.msg);
      } else {
        this.$message.success(res.msg);
        this.getAllCategory();
        this.showEdit = false;
      }
      console.log(res);
    }
  },
  /**
   * 生命周期钩子
   */
  created() {
    this.getAllCategory();
  }
};
</script>

<style lang="scss">
.el-popconfirm__main {
  margin: 10px 4px !important;
}
</style>
<style lang="scss" scoped>
.btn-delete {
  margin-left: 10px;
}

::v-deep.el-divider__text {
  background-color: #f6f8f9;
}
</style>
